<template>
    <div class="page">
        <div class="search-view">
            <h3>圈子详情</h3><br>
            <Row >
                <Col span="2">圈子名称：</Col>
                <Col span="4">{{circleData.name}}</Col>
                <Col span="2">圈子ID：</Col>
                <Col span="4">{{circleData.id}}</Col>
                <Col span="2">创建人ID：</Col>
                <Col span="4">{{circleData.create_user_id}}</Col>
                <Col span="2">创建时间：</Col>
                <Col span="4">{{circleData.create_time | formatTimestamp}}</Col>
            </Row>
        </div>
        <div class="content-view" style="margin-top: 10px;">
            <Tabs value="name1" :animated="false">
                <TabPane label="圈子用户" name="name1">
                    <CircleInfoDetailUserView :circleId="circleId">
                    </CircleInfoDetailUserView>
                </TabPane>
                <TabPane label="圈子留言" name="name2">
                    <CircleInfoDetailMsgView :circleId="circleId">
                    </CircleInfoDetailMsgView>
                </TabPane>
            </Tabs>
        </div>
        <!-- 操作弹窗 -->
    </div>
</template>

<script>
import CircleInfoDetailUserView from './view/CircleInfoDetailUserView'
import CircleInfoDetailMsgView from './view/CircleInfoDetailMsgView'

import circleService from '@/network/service/CircleService.js'

export default {
    components: {
        CircleInfoDetailUserView,
        CircleInfoDetailMsgView
    },
    data() {
        return {
            circleId: null,
            search: {
                name: null
            },
            pageData: {
                currentPage: 0,
                pageSize: 20,
                totalSize: 0,
            },
            circleData: {
            },
        }
    },
    mounted(){
        this.circleId = this.$route.query.id;
        this.getCircleDetail();
    },
    methods: {
        getCircleDetail() {
            let that = this;
            this.$Message.loading({
                content: '加载中',
                duration: 0
            });
            circleService.getCircleDetail(this.circleId).then(res => {
                that.$Message.destroy();
                let result = res.data;
                let code = result.rescode;
                if (code == 100) {
                    that.circleData=result.data;
                }else {
                    console.log(result.msg);
                }
            }, error => {
                that.listData.isLoading = false;
                that.$exception.netError(error);
                that.$Message.destroy();
            });
        },
        onClickEdit() {
            //this.editData.isShow = true;
            this.$router.push({ name: 'CarDetail', query: { id: null }});
        },
        // 行操作点击
        onActionRow(obj){
            if(obj!=null){
                let action = obj.action;
                let params = obj.params;
                // params 包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引
                switch(action){
                    case 'detail':
                        this.$router.push({ name: 'CarDetail', query: { id: params.row.id }});
                    break;
                    case 'remove':
                        this.delCar(params.index, params.row.id);
                    break;
                }
            }
        },
        onSubmitActionEdit(editdata){
            let that = this;
            that.editData.isSubmitLoading = true;
            setTimeout(function(){
                that.editData.isSubmitLoading = false;
                that.editData.isShow = false;
            },3000)
            console.log(this.editData);
            console.log(editdata);
        }
    }
}
</script>
<style lang="less" scoped>
.page {
    .search-view {
        margin-bottom: 5px;
        .action-btn {
            margin-right: 10px;
        }
    }
    .content-view {
        
    }
    .page-view{
        text-align: center;
        padding: 5px;
        border-radius: 4px;
        background-color: #fff;
        margin-top: 10px;
    }
}
</style>


